<template>
  <div class="my_network_box">
    <div class="add_btn_top">
      <div class="sw_btn_box">
        <div
          :style="{
            color: switchText == '显示筛选' ? '#666666' : '#409EFF',
            fontSize: '14px',
          }"
        >
          {{ switchText }}
        </div>
        <el-switch
          v-permission="[4, 'switch']"
          style="margin-left: 10px"
          active-color="#2680D2"
          v-model="screen"
        >
        </el-switch>
      </div>
    </div>
    <div class="gateway" v-permission="[4, 'list']">
      <div
        :style="{
          width: screen ? '79%' : '100%',
          background: '#fff',
        }"
      >
        <el-table
          height="100px"
          v-adaptive
          :data="tableData"
          style="width: 100%; margin-bottom: 0"
        >
          <el-table-column label="序号" prop="id" align="left">
          </el-table-column>
          <el-table-column label="资源名称" prop="name" align="left">
          </el-table-column>
          <el-table-column label="资源路径" prop="url" align="left">
          </el-table-column>
          <el-table-column label="父序号" prop="pid" align="left">
          </el-table-column>
          <el-table-column label="资源类型" prop="typeName" align="left">
          </el-table-column>
          <el-table-column label="备注" prop="sex" align="remark">
          </el-table-column>
        </el-table>
        <Pagination
          @pagination="pagination"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :pageSizes.sync="pageSizes"
        />
      </div>
      <div v-if="screen" class="searchForm">
        <div style="width: 100%" v-init-screen-h>
          <div class="select">筛选</div>
          <div class="">
            <div class="searchText">资源名称</div>
            <el-input
              class="inputStyle"
              v-model="form.name"
              clearable
              size="mini"
              placeholder="请输入资源名称"
            >
            </el-input>
          </div>
          <div class="">
            <div class="searchText">资源路径</div>
            <el-input
              class="inputStyle"
              v-model="form.url"
              clearable
              size="mini"
              placeholder="请输入资源路径"
            >
            </el-input>
          </div>
          <div class="">
            <div class="searchText">资源类型</div>
            <el-select
              v-model="form.typeId"
              clearable
              filterable
              size="small"
              class="w100"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="bottomBtn">
          <el-button class="reset" size="mini" style="width: 50%" @click="reSet"
            >重置</el-button
          >
          <el-button
            @click="init"
            class="submit"
            size="mini"
            style="width: 50%"
            type="primary"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/style/deviceCss/filterWindow.css";
import Pagination from "@/views/common/page";
import { getPermissionList, getPerType } from "@/api/userAuth";
import { paginationMixins } from "@/mixin/pagination";
import _ from "lodash";
import { paramsValidate } from "@/utils/utils";
export default {
  mixins: [paginationMixins],
  components: {
    Pagination,
  },
  props: {
    isShowScreen: {
      type: Boolean,
      default: false,
    },
    isTopBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      typeOptions: [],
      screen: false,
      switchText: "显示筛选",
      tableData: [],
      form: {
        name: "",
        typeId: "",
        url: "",
      },
    };
  },
  computed: {},
  async mounted() {
    this.init();
    const res = await getPerType();
    this.typeOptions = res.data.data;
  },
  methods: {
    // 重置
    reSet() {
      // this.name = "";
      for (const key in this.form) {
        this.form[key] = "";
      }
      this.init();
    },
    // 显示筛选窗
    openScrenn() {
      this.$emit("update:isShowScreen", this.screen);
    },

    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.init();
    },
    async init() {
      const res = await getPermissionList({
        page: this.pageNum,
        pageSize: this.pageSize,
        ...this.form,
      });

      // this.screen = false;
      if (paramsValidate(this.form)) {
        this.switchText = "显示筛选";
      } else {
        this.switchText = "显示筛选(已筛选)";
      }
      const { data } = res.data;
      this.total = data.total;
      this.tableData = data.list;
    },
  },
};
</script>

<style lang="scss" scoped>
.sw_btn_box {
  display: flex;
  align-items: center;
}
.gateway {
  display: flex;
}
</style>
